<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动物园管理后台</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <script src="js/jquery-3.5.1/jquery-3.5.1.js"></script>
    <script src="js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">管理后台</a>
        </div>
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">动物管理 <span class="sr-only">(current)</span></a></li>
            <li><a href="#">公告管理</a></li>
            <li><a href="#">员工管理</a></li>
            <li><a href="#">活动管理</a></li>
        </ul>
    </div>
</nav>

<div class="container mt-5">
    <div class="row">
        <div class="col-sm-6">
            <h3>动物信息</h3>
        </div>
        <div class="col-sm-6 text-right">
            <button class="btn btn-primary" data-toggle="modal" data-target="#addAnimalModal">增加</button>
        </div>
    </div>
    <table class="table table-bordered">
        <thead>
        <tr>
            <th>动物编号</th>
            <th>姓名</th>
            <th>分类名称</th>
            <th>描述</th>
            <th>出生日期</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <c:forEach var="animal" items="${animals}">
            <tr>
                <td>${animal.animalId}</td>
                <td>${animal.name}</td>
                <td>${animal.categoryName}</td>
                <td>${animal.description}</td>
                <td><fmt:formatDate value="${animal.birthdate}" pattern="yyyy-MM-dd HH:mm:ss"/></td>
                <td>
                    <button class="btn btn-danger btn-sm" onclick="deleteAnimal(${animal.animalId})">删除</button>
                </td>
            </tr>
        </c:forEach>
        </tbody>
    </table>
</div>

<!-- 增加动物模态框 -->
<div class="modal fade" id="addAnimalModal" tabindex="-1" role="dialog" aria-labelledby="addAnimalModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="addAnimalModalLabel">增加动物</h4>
            </div>
            <div class="modal-body">
                <form id="addAnimalForm" action="addAnimal" method="post">
                    <div class="form-group">
                        <label for="name">姓名</label>
                        <input type="text" class="form-control" id="name" name="name" required>
                    </div>
                    <div class="form-group">
                        <label for="category_id">分类</label>
                        <select class="form-control" id="category_id" name="categoryId" required>
                            <c:forEach var="category" items="${categories}">
                                <option value="${category.categoryId}">${category.categoryName}</option>
                            </c:forEach>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="description">描述</label>
                        <textarea class="form-control" id="description" name="description" required></textarea>
                    </div>
                    <div class="form-group">
                        <label for="birthdate">出生日期</label>
                        <input type="text" class="form-control" id="birthdate" name="birthdate" placeholder="yyyy-MM-dd HH:mm:ss" required>
                    </div>
                    <button type="submit" class="btn btn-primary">保存</button>
                </form>
            </div>
        </div>
    </div>
</div>


<script>
    function deleteAnimal(animalId) {
        if (confirm('确定要该动物信息吗？')) {
            window.location.href = 'deleteAnimal?id=' + animalId;
        }
    }
</script>
</body>
</html>
